<template>
  <div>
    <!-- <h1>父组件</h1>
    <p>来自子组件的数据: {{ childData }}</p>
    <ChildComponent :parent-data="parentData" @update-parent="handleUpdate" /> -->

    <!-- 双向绑定model，本质上是传给子组件一个值，子组件触发事件定义事件，父组件监听定义的触发事件修改值，再传入完成闭环 -->
    <!-- 双向绑定是这个语法糖，对应的input就是@input原生事件 -->
    <span>My input {{ model }}</span>
    <input v-model="model" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import ChildComponent from "./child.vue";

const parentData = ref("这是来自父组件的数据123");
const childData = ref("");
const model = defineModel(); //定义model
function handleUpdate(data) {
  childData.value = data;
}
</script>
